<template>
    <div class="person">
        <hr />
        <div class="bames">我的真实姓名：{{ name }}</div>
        <div class="bames">我的真实年龄：{{ age }}</div>
        <div class="bames">更改姓名：{{ getNewName }}</div>
        <button @click="AddAges">年龄增加</button>
        <!-- <button @click="setname">更改名字</button> -->
    </div>
</template>

<script setup>
// 使用store里的方法控制数据变化
import { useStore } from "@/store/index.js";
import { toRefs } from "vue";

const store = useStore();
let { name, age, getNewName } = toRefs(store);
const AddAges = store.setName;
</script>

<style scoped lang="less">
button {
    margin: 0 12px;
}
</style>
